<meta charset="UTF-8">
<div id="query-company">
    <div class="full">
        <h3 class="h3-title">{{$t("bgMgr.queryCustomer")}}</h3>
        <ul>
            <li>
                <i-input v-model.trim="queryParameter"></i-input>
            </li>
            <li>
                <i-button type="primary" @click="handlerClickQuery">{{$t("reportForm.query")}}</i-button>
            </li>
        </ul>

        <div class="table-wraper">
            <i-table border :columns="columns" height="520" :data="tableData" :loading="loading"></i-table>
        </div>
        <div class="my-page" style="margin: 5px 0;">
            <Page :total="total" :page-size="10" :current="currentIndex" @on-change="changePage"></Page>
        </div>

        <Modal v-model="modal" width="900" title="编辑分组">
            <div style="width:850px;margin:10px auto">
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("customer.customerName")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="companyname"></i-input>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.organization")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="orgcode"></i-input>
                    </i-col>
                </Row>
    
                <Row style="margin: 10px 0">
                        <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.registerDate")}}  : &nbsp;</i-col>
                        <i-col span="8">
                            <date-picker type="date" v-model="registerdate"></date-picker>
                        </i-col>
                        <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.legalPerson")}} : &nbsp;</i-col>
                        <i-col span="8">
                            <i-input v-model.trim="jurdcperson"></i-input>
                        </i-col>
                </Row>
    
                <Row style="margin: 10px 0">
                        <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.contacts")}} : &nbsp;</i-col>
                        <i-col span="8">
                            <i-input v-model.trim="companyperson"></i-input>
                        </i-col>
                        <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.contactNumber")}} : &nbsp;</i-col>
                        <i-col span="8">
                            <i-input v-model.trim.number="companyphone"></i-input>
                        </i-col>
                </Row>
    
                <Row style="margin: 10px 0">
                        <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.phoneNumber")}} : &nbsp;</i-col>
                        <i-col span="8">
                            <i-input v-model.trim.number="alldayphone"></i-input>
                        </i-col>
                        <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.aptitude")}} : &nbsp;</i-col>
                        <i-col span="8">
                            <i-select v-model="type">
                                <i-option v-for="item in operationList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                            </i-select>
                        </i-col>
                </Row>
    
                <Row style="margin: 10px 0">
                        <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.personNumber")}} : &nbsp;</i-col>
                        <i-col span="8">
                            <i-input v-model.trim.number="empcount"></i-input>
                        </i-col>
                </Row>
    
                <Row style="margin: 10px 0">
                        <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.officeAddress")}} : &nbsp;</i-col>
                        <i-col span="20">
                            <i-input v-model.trim="officeaddr"></i-input>
                        </i-col>
                </Row>
    
                <Row style="margin: 10px 0">
                        <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.registerAddress")}} : &nbsp;</i-col>
                        <i-col span="20">
                            <i-input v-model.trim="registeraddr"></i-input>
                        </i-col>
                </Row>
    
                <Row style="margin: 10px 0">
                        <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.remark")}} : &nbsp;</i-col>
                        <i-col span="20">
                            <i-input v-model.trim="remark"></i-input>
                        </i-col>
                </Row>
    
                <Row style="margin: 10px 0">
                        <i-col span="6" :offset="6">
                            <i-button style="width: 100%" @click="handleSubmit">{{$t("bgMgr.submit")}}</i-button>
                        </i-col>
                        <i-col span="6" :offset="1">
                            <i-button style="width: 100%" @click="resetInfo">{{$t("bgMgr.reset")}}</i-button>
                        </i-col>
                </Row>    
            </div>
            <div slot="footer" style="height:20px;"></div>
        </Modal>
    </div>
    <script>
vueInstanse = new Vue({
            el:"#query-company",
            i18n: utils.getI18n(),
            data:{
                modal:false,
                editDeviceIndex:null,
                queryTableData:[],
                loading:true,
                    columns: [
                        {
                            title: vRoot.$t("customer.customerName"),
                            key: 'companyname',
                        },
                        {
                            title: vRoot.$t("customer.contacts"),
                            key: 'companyperson'
                        },
                        {
                            title: vRoot.$t("customer.contactNumber"),
                            key: 'companyphone'
                        },
                        {
                            title: vRoot.$t("customer.officeAddress"),
                            key: 'officeaddr'
                        },
                        {
                            title: vRoot.$t("bgMgr.action"),
                            key: 'action',
                            width: 160,
                            render: function(h, params) {
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: function() {
                                                vueInstanse.editDeviceIndex = params.index;
                                                editObject = params.row;
                                                vueInstanse.setCompanyData();
                                                vueInstanse.modal = true;
                                                // vueInstanse.editCustomer(params.index);
                                            }
                                        }
                                    }, vRoot.$t("bgMgr.edit")),
                                    h('Poptip', {
                                        props: {
                                            confirm: true,
                                            title: vRoot.$t("message.confirmDel")
                                        },
                                        on: {
                                            'on-ok': function () {
                                                vueInstanse.del(params.row);
                                            }
                                        }
                                    },[
                                    h('Button', {
                                            props: {
                                            type: 'error',
                                            size: 'small'
                                            }
                                        },vRoot.$t("bgMgr.delete")) 
                                    ])    
                                ]);
                            }
                        }
                    ],
                    currentIndex:1,
                    tableData: [],
                    queryType:"companyname",
                    queryParameter:"",
                    queryList:[
                        {value:"companyname",label:vRoot.$t("customer.customerName")},
                        {value:"jurdcperson",label:vRoot.$t("customer.legalPerson")},
                        {value:"companyperson",label:vRoot.$t("customer.contacts")},
                    ],
                    recordsList:[],
                    total:0,  
                    delCustomerObj:{},

                companyname:"", //公司名称
                orgcode  :"",  //机构编号
                registerdate:null, //成立日期
                jurdcperson:"",   // 法人
                companyperson:"",      //企业联系人
                companyphone:"",  //企业联系电话
                alldayphone:"",        //24小时联系电话
                empcount:"",    //员工数量
                officeaddr:"",  //工作地址
                registeraddr:"",//注册地址
                remark:"",      //备注
                type:"",  // 运营级别
                operationList:[{value:1,label: isZh ? '1级资质' : 'Level 1'},{value:2,label: isZh ? '2级资质' : 'Level 2'},{value:3,label: isZh ? '3级资质' : 'Level 3'}]
      
            },
            methods:{
                queryAllCompanyInfo:function(claaback){
                    var url = myUrls.queryCompanyByCreater();
                    utils.sendAjax(url,{},claaback)
                },
                doQueryAllCompanyInfo:function(resp){
                    if(resp.status===0){
                        resp.records.forEach(function (record) { 
                            record.companyperson ? "" : record.companyperson = record.jurdcperson;
                            record.pinYin = __pinyin.getPinyin(record.companyname);
                            record.firstLetter = __pinyin.getFirstLetter(record.companyname);
                        });
                        this.recordsList = resp.records;
                        this.total = this.recordsList.length;
                        this.tableData =  this.recordsList.slice(0,10);
                    }
                    this.loading = false;
                },
                handlerClickQuery () {
        
                    var self = this;
                    var queryTableData = [];
                    var queryParameterLowerCase = this.queryParameter.toLowerCase();
                    if (!self.queryParameter) return;
                    this.recordsList.forEach(function (record) {
                        var companyname = record.companyname;
                        var jurdcperson = record.companyperson ? record.companyperson :record.jurdcperson;
                        if (
                            companyname.indexOf(self.queryParameter) != -1 || 
                            (jurdcperson && jurdcperson.indexOf(self.queryParameter) != -1) ||
                            record.pinYin.indexOf(queryParameterLowerCase) != -1 ||
                            record.firstLetter.indexOf(queryParameterLowerCase) != -1 
                        ){        
                            queryTableData.push(record);
                        }
                    });

                    this.currentIndex = 1;
                    this.queryTableData = queryTableData;
                    this.tableData = this.queryTableData.slice(0,10);
                    this.total = this.queryTableData.length;
                },

                del:function(delObj){
                   var url = myUrls.deleteCompany();
                   var data = { companyid : delObj.companyid};
                   this.delCustomerObj = delObj;
                   utils.sendAjax(url,data,this.doDeleteCallback);
                },
                doDeleteCallback:function(resp){
                    var me = this; 
                    if(resp.status == 0){
                        this.$Message.success(me.$t("message.deleteSucc"));

                        this.recordsList.forEach(function(item,index){
                            if(item.companyid == me.delCustomerObj.companyid){
                                me.$delete(me.recordsList,index);
                            }
                        });

                        this.tableData.forEach(function(item,index){
                            if(item.companyid == me.delCustomerObj.companyid){
                                me.$delete(me.tableData,index);
                            }
                        });

                        me.total = me.recordsList.length;
                        me.tableData = me.recordsList.slice( me.currentIndex - 1 , 10);
                    }else{
                        this.$Message.error(resp.cause);
                    }
                    this.modal = false;
                },
                handleSubmit:function(){
                    var url = myUrls.editCompany() , me = this;
                    var data = {companyid:editObject.companyid};
                        if(this.companyname !== "" ){
                            data.companyname = this.companyname;
                        }else{
                            this.$Message.error(isZh ? "公司名称是必填的!" : "Company name is mandatory");
                            return ;
                        }
                        this.orgcode != "" ? data.orgcode = this.orgcode : "" ;
                        this.companyphone != "" ? data.companyphone = this.companyphone : "" ;
                        this.registerdate != "" ? data.registerdate = new Date(this.registerdate).getTime() : "" ;
                        this.jurdcperson != "" ? data.jurdcperson = this.jurdcperson : "" ;
                        this.registeraddr != "" ? data.registeraddr = this.registeraddr : "" ;
                        this.alldayphone != "" ? data.alldayphone = this.alldayphone : "" ; 
                        this.companyperson != "" ? data.companyperson = this.companyperson : "" ;
                        this.empcount != "" ? data.empcount = this.empcount : "" ; 
                        this.empcount != "" ? data.empcount = this.empcount : "" ; 
                        this.officeaddr != "" ? data.officeaddr = this.officeaddr : "" ; 
                        this.remark != "" ? data.remark = this.remark : "" ; 
                        this.type != "" ? data.type = this.type : "" ;
                    utils.sendAjax(url,data,function (resp) { 
                        if(resp.status==0){
                            var newData = Object.assign(editObject,data);
                                newData.overduetimestr = data.registerdate ? DateFormat.longToDateTimeStr(data.registerdate,0):0;
                            me.tableData[me.editDeviceIndex] = newData; 
                            utils.changeSingleItemData(me.recordsList,newData,'companyid');
                            me.$Message.success(isZh ? "修改成功" : "Editorial success");
                        }else{
                            if(resp){
                                if(resp.cause){
                                    me.$Message.error(resp.cause);
                                }
                            }else{
                                me.$Message.error('编辑失败');
                            }
                        }
                    });
                },
                resetInfo:function(){
                    this.companyname = "";
                    this.orgcode = "" ;
                    this.companyphone = "";
                    this.companyperson = "";
                    this.registerdate = "" ;
                    this.jurdcperson = "" ;
                    this.alldayphone ="" ;
                    this.empcount = "" ; 
                    this.empcount = ""; 
                    this.officeaddr = ""; 
                    this.remark = "" ; 
                    this.type = ""; 
                    this.registeraddr = "";
                },
                setCompanyData:function(){
                    this.companyname = editObject.companyname;
                    this.orgcode = editObject.orgcode;
                    this.companyphone = editObject.companyphone;
                    this.registerdate = editObject.registerdate?DateFormat.longToDateStr(editObject.registerdate,0) : null;
                    this.jurdcperson = editObject.jurdcperson;
                    this.alldayphone =editObject.alldayphone;
                    this.empcount = editObject.empcount;
                    this.officeaddr = editObject.officeaddr;
                    this.remark = editObject.remark; 
                    this.type = editObject.type;
                    this.companyperson = editObject.companyperson;
                    this.registeraddr = editObject.registeraddr;
                },
            },     
            mixins:[mixIn],
            mounted:function(){
                this.queryAllCompanyInfo(this.doQueryAllCompanyInfo);               
            }
        });
    </script>    
</div>

